<template>
    <div id="app">
      <!-- <MyDay07/> -->
      <!-- -----axios-------------- -->
      <!-- <MyDay08/> -->
      <!-- -----封装axios------- -->
      <!-- <MyDay09/> -->
      <!-- slot插槽
      父传子 -->
      <!-- 默认插槽 在父级中使用子集的标签内添加内容，子集slot标签 -->
      <!-- <MyDay10>
        <h1>看我看我看我</h1>
        <p>我是p标签</p>
      </MyDay10> -->
      <!-- <hr> -->
      <!-- <MyDay10>
        <ul>
          <li v-for="(item,index) of dataList" :key="index+item">{{ item }}</li>
        </ul>
      </MyDay10> -->
      <!-- 具名插槽 在父级中使用子集的标签内添加内容并添加名称，
        子集slot标签使用name接收父级定义的名称
      当我们在template标签中可以使用v-slot:名称-->
      <!-- <MyDay10>
        <div>
          <h1>我是测试默认值</h1>
        </div>
        <div slot="center">
          <h1>我是center的测试文本</h1>
        </div>
        <template v-slot:templates>
          <h1>我是template测试</h1>
        </template>
      </MyDay10> -->
      <!-- 作用域插槽 -->
      <MyDay10>
        <!-- <template scope="gamesList">
          <h1 v-text="gamesList"></h1>
          <ul>
            <li v-for="(item,index) of gamesList" :key="item+index">
              {{ item }}{{ index }}
              <span v-for="(items,index) of item" :key="index">{{ items }}</span>
            </li>
          </ul>
        </template> -->
        <hr>
        <template slot-scope="gamesBase">
          <ul>
            <li v-for="(item,index) of gamesBase" :key="item+index">
              {{ item }}{{ index }}
              <span v-for="(items,index) of item" :key="index">{{ items }}</span>
            </li>
          </ul>
        </template>
      </MyDay10>
  
  
    </div>
  </template>
  
  <script>
  // import MyDay07 from './components/day07.vue'
  // import MyDay08 from './components/day08.vue'
  // import MyDay09 from './components/day09.vue'
  import MyDay10 from './components/day10.vue'
  
  export default {
    name: 'App',
    components: {
      // MyDay07,
      // MyDay08,
      // MyDay09,
      MyDay10,
    },
    data() {
      return {
        dataList:["一号","二号","三号","四号"],
      }
    },
    methods: {
      
    },
    // 挂载后
    mounted() {
  
    },
  }
  </script>
  
  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  </style>
  